<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
<!--Vue所管理的容器: 将来创建结构动态渲染这个容器-->
    <div id="app">
        <!-- 工程化开发模式中,这里不再直接编写Vue代码,只是做一个容器来使用-->
        <!-- 真正的代码要在app.vue中编写-->
    </div>
    <script type="module" src="/src/main.js">
/* 工程化开发模式中这里不再编写JS代码,只是做一个src的引用来使用
*  真正的JS要在main.js中编写
* */

/*
* Vue开发的两种方式：
*   1.基于核心包的传统开发模式: 基于html/css/js文件，直接引入核心包，开发vue
*   2.工程化开发模式: 基于构建工具(例如: webpack)的环境中开发Vue
*
* 脚手架Vue CLI:
*   基本介绍: Vue CLI是Vue 官方提供的一个全局命令工具，可以帮我们快速创建一个开发Vue项目的标准化基础架子（集成了webpack配置）
*   使用步骤:
*       1.全局安装(一次): yarn global add @vue/cli 或 npm i @vue/cli -g
*       2.查看Vue版本: vue --version
*       3.创建项目架子: vue create project-name（项目名-不能用中文）
*       4.启动项目: yarn serve 或 npm run serve（找package.json）
* */

/*
* 脚手架目录文件介绍
*       node_modules: 存放第三方包的文件夹，可以放一些第三方依赖
*       public: 存放html文件的地方,里面有个index.html 还有个Vue的图标
*
*       src: 源代码目录，以后写代码的文件夹
*           assets: 静态资源目录,存放图片、字体等
*           components: 组件目录,存放通用组件
*           App.vue: App根组件，项目运行时看到的内容就在这里编写
*           main.js: 入口文件->打包或者运行时第一个执行的文件
*
*       .gitignore: git忽视文件，对用户没啥用
*       package.json: 项目配置文件，包含项目名、版本号、scripts、依赖包等
*       README.MD: 项目说明文档
*       vue.config.js: vue-cli配置文件
*
* */


    </script>
  </body>
</html>
